<template>
	<view class="">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="a-center  py-3 d-flex j-sb clazz">
						<view class="">商品名称</view>
						<view class="mr-3">
							<view class="">{{detail.goods_name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom a-center  py-3 d-flex j-sb clazz">
						<view class="">卡片序号</view>
						<view class="mr-3">
							<view class="" v-if="edit">
								{{"编辑"}}
							</view>
							<view class="" v-else>
								<input type="digit"  class="text-right" placeholder="请输入" v-model="card_sn"  placeholder-class="text-light-muted d-flex j-end" @input="add_serial" />
							</view>
						</view>
					</view>
					<view class=" py-3 a-center d-flex j-sb clazz">
						<view class="">卡片密码</view>
						<view class="mr-3">
							<view class="" v-if="edit">
								{{"编辑"}}
							</view>
							<view class="" v-else>
								<input type="text" class="text-right" placeholder="请输入" v-model="card_pass" placeholder-class="text-light-muted d-flex j-end" @input="add_pass" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="a-center  py-3 d-flex j-sb clazz">
						<view class="">截止使用时期</view>
						<view class="mr-3" @click="initiate">
							<view class="d-flex a-center j-center" v-if="!expire_date">
								<view class="text-light-muted mr-1">请设置</view>
								<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
							</view>
							<view v-else class="text-right text-muted">{{expire_date}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
		</view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="next_sub">确定</button>
		</view>
		
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data(){
			return {
				card_id:"", // 商品ID
				edit:"", // 编辑进来的
				detail:"", // 商品详情
				card_sn:"" , // 卡片序号
				card_pass:"", // 卡片密码
				initiate_show:false,// 开始 开关
				expire_date:"", // 开始时间
				u_loadmore:true, // 加载中
			}
		},
		methods:{
			// 提示
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			// 卡片名字
			add_name(e){
				this.card_name=e.detail.value
			},
			// 卡片序号
			add_serial(e){
				this.card_sn=e.detail.value
			},
			// 卡片密码
			add_pass(e){
				this.card_pass=e.detail.value
			},
			// 开始时间
			initiate(){
				this.initiate_show=true
			},
			// 开始
			initiate_confirm(e){
				this.expire_date=`${e.year}-${e.month}-${e.day}`;
			},
			// 修改
			next_sub(){
				this.$H.post("v2/store/virtual/goods/virtualCard/update",{
					card_id:this.card_id,
					card_sn:this.card_sn,
					card_password:this.card_pass,
					expire_date:this.expire_date,
				}).then(res=>{
					if(res.status.succeed==1){
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							back: true
						})
					}else{
						this.$refs.uToast.show({
							title: res.status.error_desc,
							type: 'default',
						})
					}
				})	
			}
		},
		
		onLoad(e) {
			this.card_id=e.card_id
			this.$H.post("v2/store/virtual/goods/virtualCard/detail",{
				card_id:e.card_id
			}).then(res=>{
				this.u_loadmore=false
				this.detail=res.data
				this.card_sn=this.detail.card_sn
				this.card_pass=this.detail.card_password
				this.expire_date=this.detail.formatted_expire_date.substr(0,10)
			})
		}
	}
</script>

<style>
	
</style>
